<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
1
<style>
  body{
    color:rgb(255, 0, 0);
  }
</style>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.
设置这个布尔属性是为了向浏览器表明脚本是在文档解析之后，但是在触发 DOMContentLoaded 之前执行的。

Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.
带有 defer 属性的脚本将阻止 DOMContentLoaded 事件触发，直到脚本加载并完成计算。

This attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect.
行内式 <script> defer属性无效, 除非它是一个module <script type="module"> 参看 `05ESM in Browser/01行内script也会延迟加载`

The defer attribute has no effect on module scripts — they defer by default.
module scripts(es6 module) 无法使用defer属性 因为它本身默认就是defer的

Scripts with the defer attribute will execute in the order in which they appear in the document.
带有 defer 属性的脚本将按照它们在文档中出现的顺序执行。

-->
<script defer src="defer1.js"></script>
<script defer src="defer2.js"></script>
<style>
  body{
    color:rgb(0, 0, 255);
  }
</style>
2
<script>
  document.addEventListener('DOMContentLoaded',function(){
    console.log(`DOMContentLoaded!`);
  })
</script>
</body>
</html>
